<template>
	<view class="wdthdrawal">
		<view class="pagetitle">
			<uni-breadcrumb separator="/">
				<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
					{{route.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>
		</view>
		
		<loading v-if="loading" ></loading>
		<view v-else class="table">
			<uni-table ref="table" :loading="loading"  :emptyText="data.length || '没有更多数据'" border stripe  @selection-change="selectionChange">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" style="width:200px;">选项</uni-th>
					<uni-th>值</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-th align="center" style="width:200px;">骑手ID</uni-th>
					<uni-th>
						{{data._id}}
					</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-th align="center" style="width:200px;">骑手头像</uni-th>
					<uni-th>
						<image v-if="data.avatar" :src="data.avatar+'?x-oss-process=image/resize,m_fixed,h_100,w_100'" mode="widthFix" style="width:70rpx;" ></image>
					</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-th align="center" style="width:200px;">骑手姓名</uni-th>
					<uni-th>
						{{data.name}}
					</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-th align="center" style="width:200px;">骑手手机号</uni-th>
					<uni-td>
						{{data.mobile}}
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-th align="center" style="width:200px;">身份卡证号</uni-th>
					<uni-td>
						{{data.id_card}}
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-th align="center" style="width:200px;">账号状态</uni-th>
					<uni-td>
						<text :style="`color:${data.is_online?'#12aa08':'#ccc'};font-weight:bold`" >
							{{data.is_online?'在线':'离线'}}
						</text>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-th align="center" style="width:200px;">审核状态</uni-th>
					<uni-td>
						{{data.examine_status.text}}
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-th align="center" style="width:200px;">金额</uni-th>
					<uni-td>
						<text class="fontColorApp">
							￥{{(data.money/100).toFixed(2)}}
						</text>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-th align="center" style="width:200px;">进行中订单</uni-th>
					<uni-td>
						{{data.order_number}} 单
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-th align="center" style="width:200px;">已完成总单量</uni-th>
					<uni-td>
						{{data.order_total_number}} 单
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-th align="center" style="width:200px;">骑手位置</uni-th>
					<uni-td>
						经纬度：{{data.location.coordinates}}
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-th align="center" style="width:200px;">
						手持证件
					</uni-th>
					<uni-td>
						<image :src="data.photo.hand_id_card" @click="eventImage(data.photo.hand_id_card)" mode="heightFix" style="height:100px"></image>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-th align="center" style="width:200px;">
						健康证件
					</uni-th>
					<uni-td>
						<image :src="data.photo.health_certificate" @click="eventImage(data.photo.health_certificate)" mode="heightFix" style="height:100px"></image>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-th align="center" style="width:200px;">
						身份证/正
					</uni-th>
					<uni-td>
						<image :src="data.photo.id_card_zheng" @click="eventImage(data.photo.id_card_zheng)"  mode="heightFix" style="height:100px"></image>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-th align="center" style="width:200px;">
						身份证/反
					</uni-th>
					<uni-td>
						<image :src="data.photo.id_card_fan" @click="eventImage(data.photo.id_card_fan)"  mode="heightFix" style="height:100px"></image>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view style="margin-top:50px;color:#999;font-size:18px;line-height:35px;padding:0 10px">
				相关订单
			</view>
			<uni-table ref="table" :loading="loading_order"  :emptyText="loading_order || '没有更多数据'" border stripe  @selection-change="selectionChange">
				<!-- 表头行 -->
				<uni-tr>
						<uni-th style="width:200px;" align="center" class="detail-uni-td-weight" >
							商铺
						</uni-th>
						<uni-th style="width:300px;" align="center" class="detail-uni-td-weight" >
							订单号
						</uni-th>
						<uni-th style="width:100px;" align="center" class="detail-uni-td-weight" >
							订单金额
						</uni-th>
						<uni-th style="width:100px;" align="center" class="detail-uni-td-weight" >
							订单类型
						</uni-th>
						<uni-th style="width:200px;" align="center" class="detail-uni-td-weight" >
							用户信息
						</uni-th>
						<uni-th  align="center" class="detail-uni-td-weight" >
							完成时间
						</uni-th>
						<uni-th align="center">
							操作
						</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in orderData" :key="index" >
					<uni-td  align="center">
						{{item.shop_id[0].title}}
					</uni-td>
					<uni-td  align="center">
						{{item.order_no}}
					</uni-td>
					<uni-td class="color"  align="center" >
						￥{{ (item.total_price/100).toFixed(2) }}
					</uni-td>
					<!-- 类型 -->
					<uni-td align="center" :style="`color:${item.type==2?'#0097e6':item.type==1&&item.service_text=='预约时间送达'?'#4cd137':'#e88b00'}`" >
						{{item.type==2?'到店就餐':item.service_text=='预约时间送达'?'按预约时间送达':'外卖配送'}}
					</uni-td>
					<!-- 用户 -->
					<uni-td align="center">
						<view>
							{{item.address?item.address.name:''}} - {{(item.address.phone).slice(-4)}}
						</view>
						<view class="pages_content">
							{{item.address?item.address.title+' - '+ item.address.address_detail :''}}
						</view>
					</uni-td>
					<uni-td  align="center">
						<uni-dateformat :date="item.status.create_time" ></uni-dateformat>
					</uni-td>
					<uni-td  align="center"> 
						<button size="mini"  @click="navigateTo('/pages/order/uni-pay-orders/detail?id='+item.order_no, false)" type="primary">查详情</button>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box">
				<uni-pagination @change="enventFneye" :v-model="currentPage" :pageSize="limit" title="" :total="total"></uni-pagination>
			</view>
			<view v-if="!loading" style="margin:50px 0">
				<view style="font-weight:bold;line-height:50px">
					骑手位置
				</view>
				<map style="width:800px; height: 300px;" :longitude="data.location.coordinates[0]"
					:latitude="data.location.coordinates[1]" :markers="covers"></map>
			</view>
			
			<view class="uni-pagination-box">
				<uni-pagination @change="enventFneye" :v-model="currentPage" :pageSize="limit" title="" :total="total"></uni-pagination>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import Util from "@/js_sdk/validator/util.js"
	const global = uniCloud.importObject("global",{customUI:true})
	const db = uniCloud.database()
	let _uid = ''
	export default {
		data() {
			return {
				loading_order:true,
				loading:true,
				routes: [
					{to: "/pages/index/index",name: "首页",},
					{to: "",name: "骑手管理" },
					{to: "/pages/rider/rider_users/list",name: "骑手列表" },
					{to: "",name: "骑手详情" }
				],
				// 分页
				total:0, //  总条数
				skip:0,// 开始查询位置
				limit:10, // 单词查询条数
				currentPage:1, // 当前页
				data:{},
				covers: [],
				orderData:[]
			}
		},
		onLoad(e) {
			// e._uid 必须是商铺id或者创建人id(用户表id)
			if (e._uid) {
				_uid = e._uid
				this.getData()
				this.getorder()
			}else {
				return uni.showModal({
					title:"环境异常",
					content:"当前环境异常，请稍后重试",
					showCancel:false
				}).then(res=>{
					if (res.confirm) {
						uni.reLaunch({
							url:'/pages/index/index'
						})
					}
				})
				
			}
			
		},
		methods: {
			getData(){
				let billField =  "_id,mobile,name,avatar,id_card,is_online,order_number,photo,status,order_total_number,money,examine_status,location,create_date"
				db.collection("rider_users" )
					.doc(_uid)
					.field(billField)
					.get({getOne:true,getCount:true,customUI:true})
				.then(res=>{
					let Data = res.result.data
					this.data = Data
					this.loading = false
					let cover = {
						clickable: true,
						title: Data.name,
						latitude: Data.location.coordinates[1],
						longitude: Data.location.coordinates[0],
						iconPath: Data.avatar
					}
					this.covers.push(cover)
				})
			},
			getorder(){
				let Field = "shop_id,service_text,address,rider,pay_date,type,status,order_no,total_price,user_id"
				let order = db.collection("orders").field(Field).getTemp({getOne:false})
				let shop =  db.collection("shop").field("title,_id").getTemp({getOne:true})
				db.collection(order,shop)
					.where({"rider.user_id":_uid})
					.orderBy("pay_date desc")
					.skip(this.skip).limit(this.limit)
					.get({getOne:false,getCount:true,customUI:true})
				.then(res=>{
					let Data = res.result.data
					console.log(Data);
					this.total = res.result.count
					this.orderData = Data
					this.loading_order = false
				})
			},
			eventImage(image){
				uni.previewImage({
					urls:[image]
				})
			},
			// 分页
			enventFneye(val){
				this.loading_order = true
				this.skip = (val.current-1)*10
				this.getorder()
			},
			navigateTo(url, clear) {
				// clear 表示刷新列表时是否清除页码，true 表示刷新并回到列表第 1 页，默认为 true
				uni.navigateTo({
					url,
					events: {
						refreshData: () => {
							this.loadData(clear)
						}
					}
				})
			},
			// 手机号重构
			rebornMobile(mobile){
				return 	Util.formatPhoneNumber(`${mobile}`)
			},
			goUrl(Url){
				uni.navigateTo({
					url:Url
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.hoverBak{
	}
	.select{
		width:500rpx;
		margin:0 20rpx;
	}
	.pagetitle{
		padding:10rpx;
		display: flex; justify-content: space-between; align-items:center;
		.right{
			display:flex;
		}
	}
	.warn{
		padding:10rpx;
	}
	.item{
		padding:10rpx;
		margin:0rpx;
		border-bottom:1rpx solid #eee;
		display: flex; justify-content: space-between; align-items:center;
		.items{
			flex: 1;
			text-align: center;
		}
	}
	.title{
		font-size:16px;font-weight: bold;
	}
	.table{
		margin:50rpx 20rpx;
		border:1px solid #eee;
		border-bottom:none
	}
	.wdthdrawal{
		padding:20rpx;
		font-size:14px;
	}
</style>
